<template>
  <div class="app-container">
    <!-- 按钮 开始-->
<!--    <el-card class="box-card">-->
<!--      <div style="text-align:right;">-->
<!--        <el-button type="primary" icon="el-icon-plus"  size="small" :disabled="iii" @click="handleAddMedicines">添加药品</el-button>-->
<!--        <el-button type="warning" icon="el-icon-check"  size="small" @click="handzc">暂存</el-button>-->
<!--        <el-button type="danger" icon="el-icon-finished"  size="small" @click="handleSubmitAndAudit">提交审核</el-button>-->
<!--      </div>-->
<!--    </el-card>-->
    <!-- 按钮 结束-->
    <!-- 主表单开始 -->
    <el-card class="box-card">
      <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="68px">
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-form-item label="单据号" prop="purchaseId">
              <el-input
                v-model="form.purchaseId"
                placeholder="请输入单据号"
                :disabled="true"
                size="small"
                style="width:220px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-form-item label="供应商" prop="providerId">
              <el-select  
                v-model="form.providerId"
                placeholder="请选择供应商"
                size="small"
                style="width:220px"
              >
                <el-option
                  v-for="d in providerOptions"
                  :key="d.providerId"
                  :label="d.providerName"
                  :value="d.providerId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-form-item label="总批发额" prop="purchaseTradeTotalAmount">
              <el-input
                v-model="form.purchaseTradeTotalAmount"
                placeholder="请输入总批发额"
                :disabled="true"
                size="small"
                style="width:220px"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 主表单结束 -->

    <!-- 选择中的详情数据表格开始 -->
    <el-card class="box-card">
      <el-table
        :data="purchaseItemList"
        class="tb-edit"
        style="width:100%"
        border
        highlight-current-row
      >
        <el-table-column label="药品ID" align="center" width="80" prop="medicinesId" />
        <el-table-column label="药品名称" align="center" width="150" prop="medicinesName" />
        <el-table-column label="规则" align="center" width="80" prop="conversion">
          <template slot-scope="scope">
            <span> {{ scope.row.conversion }}{{ scope.row.unit }}</span>
          </template>
        </el-table-column>
        <el-table-column label="生产厂家" align="center" width="220" prop="producterId" :formatter="producterFormatter"/>
        <el-table-column label="数量" align="center" width="160" prop="purchaseNumber">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.purchaseNumber"
              :step="1"
              size="small"
            />
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center" width="80" prop="unit" />
        <el-table-column label="批发价" align="center" width="160" prop="tradePrice">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.tradePrice"
              :step="0.1"
              :precision="2"
              size="small"
            />
          </template>
        </el-table-column>
        <el-table-column label="批发额" align="center" width="80" prop="tradeTotalAmount">
          <template slot-scope="scope">
            <span>{{ scope.row.tradeTotalAmount|rounding }}</span>
          </template>
        </el-table-column>
        <el-table-column label="批次号" align="center" width="180" prop="batchNumber">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.batchNumber"
              size="small"
            />
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" width="180" prop="remark">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.remark"
              size="small"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="small" type="danger"  >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 选择中的详情数据表格结束 -->

    <!-- 药品列表的弹出层开始 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1100px"
      center
      append-to-body
    >
      <!-- 查询条件开始 -->
      <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">

        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="queryParams.keywords"
            placeholder="请输入关键字"
            clearable
            size="small"
            style="width:180px"
          />
        </el-form-item>
        <el-form-item label="药品类型" prop="medicinesType">
          <el-select
            v-model="queryParams.medicinesType"
            placeholder="药品类型"
            clearable
            size="small"
            style="width:180px"
          >
            <el-option
              v-for="dict in medicinesTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="处方类型" prop="prescriptionType">
          <el-select
            v-model="queryParams.prescriptionType"
            placeholder="处方类型"
            clearable
            size="small"
            style="width:180px"
          >
            <el-option
              v-for="dict in prescriptionTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" >搜索</el-button>
          <el-button type="primary" icon="el-icon-refresh" size="mini">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 查询条件结束 -->

      <!-- 药品的数据表格开始 -->
      <el-table ref="medicinesTableList" v-loading="loading" border :data="medicinesTableList" @selection-change="handleSelectionChnage">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="药品ID" align="center" prop="medicinesId" />
        <el-table-column label="药品名称" align="center" prop="medicinesName" />
        <el-table-column label="药品编号" align="center" prop="medicinesNumber" />
        <el-table-column label="生产厂家" width="280px" align="center" prop="producterId" :formatter="producterFormatter" />
        <el-table-column label="药品类型" align="center" prop="medicinesType" :formatter="medicinesTypeFormatter" />
        <el-table-column label="处方类型" align="center" prop="prescriptionType" :formatter="prescriptionTypeFormatter" />
        <el-table-column label="关键字" align="center" prop="keywords" />
      </el-table>
      <!-- 药品的数据表格结束 -->
      <!-- 分页控件开始 -->
     <el-pagination
           v-show="total>0"
           :current-page="pageNum"
           :page-sizes="[5, 10, 20, 30]"
           :page-size="pageSize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total"
           @size-change="handLeSizeChange"
           @current-change="handleCurrentChange"
         />
    <!-- 分页控件结束 -->
    </el-dialog>
    <!-- 药品列表的弹出层结束 -->


  </div>
</template>

<script>

export default {
  filters: {
    rounding(value) {
      return value.toFixed(2)
    }
  },
  data() {
    return {
      // 加载情节
      loading: false,
	  iii: false,
      // 是否打开药品的弹出层
      open: false,
      // 总条数
      total: 0,
	  pageNum: 1,
	  pageSize: 12,
      // 弹出层的标题
      title: '',
      // 是否已提交
      // isSubmit: true,
      // 供应商的下拉列表数据
      providerOptions: [],
      // 生产厂家的列表数据
      producterOptions: [],
      // 药口类型的字典数据
      medicinesTypeOptions: [],
      // 处方类型的字典数据
      prescriptionTypeOptions: [],
      // 主表单的数据
      form: {
        purchaseId: undefined,
        providerId: undefined,
        purchaseTradeTotalAmount: undefined
      },
      // 声明数据详情表格的数据
      purchaseItemList: [],
      // 药品表格数据
      medicinesTableList: [],
      // 药品弹出层的查询条件
      queryParams: {
        medicinesType: undefined,
        prescriptionType: undefined,
        keywords: undefined
      },
      // 弹出层选中的药品
      selectMedicines: [],
      // 是否显示批量设置的弹出层
      batchSetOpen: false,
      // 批量设置的数据绑定
      batchSetForm: {
        purchaseNumber: 0,
        tradePrice: 0.00,
        batchNumber: '',
        remark: ''
      },
      rules: {
        providerId: [
          { required: true, message: '请选择供应商', trigger: 'blur' }
        ]
      }
    }
  },
  // 监听purchaseItemList里面的数据变化，更新总批发额
  watch: {
    purchaseItemList: {
      handler: function() {
        this.form.purchaseTradeTotalAmount = 0.00
        this.purchaseItemList.filter(item => {
          item.tradeTotalAmount = item.tradePrice * item.purchaseNumber
          this.form.purchaseTradeTotalAmount += item.tradeTotalAmount
        })
      },
      deep: true
    }
  },
  created() {
	this.initrowid();
	this.initProvider();
	this.initProducer();
	this.initMedicinesAll();
	this.initMedicinesType();
	this.initPrescriptionType();
  },
  
  deactivated () {
      //解决vue组件 前进刷新，后退不刷新，
      //$destroy完全销毁一个实例，清理它与其它实例的连接，解绑它的全部指令及事件监听器。
      this.$destroy();
  },


  methods: {
  //   // 查询药品数据
		initrowid(){
			this.form.purchaseId=this.$route.query.id;
			let paramed = this.$route.query.id;
			 this.$http.post(`/stock/api/edit/getPurchaseItem/${paramed}`).then(res => {
				this.purchaseItemList = res.data.data

			  })
		},

		//下拉框供应商
		initProvider() {
			this.$http.get("stock/api/provider/getAll").then(result => {
				this.providerOptions = result.data.data
			
			})
		},
		// //from表单显示双表关联替换数据//生产厂家
		// 			providerFormatter(row){
		// 				let v=row.producterId;
		// 					for(let i=0;i<this.producterOptions.length;i++){
		// 							if(this.producterOptions[i].producerId==v){
		// 								return this.producterOptions[i].producerName;
		// 							}
		// 						}
		// 						return "";
		// 			},
					initMedicinesType() {
						this.$http.get("stock/api/user/findByType/his_medicines_type").then(result => {
							this.medicinesTypeOptions=result.data.data
						})
					},
					
					        //from表单显示双表关联替换数据//药品类型
								medicinesTypeFormatter(row){
									let v=row.medicinesType;
									return this.formatDict2(this.medicinesTypeOptions,v)
								},

								// //处方类型多选框展示
								initPrescriptionType() {
									this.$http.get("stock/api/user/findByType/his_prescription_type").then(result => {
										this.prescriptionTypeOptions = result.data.data
									})
								},

					            //将字典中的和from表单中的更换显示//处方类型
									prescriptionTypeFormatter(row){
										let v=row.prescriptionType;
										return this.formatDict2(this.prescriptionTypeOptions,v)
									},

					//将生产厂家的数据放入producterOptions
					initProducer() {
						this.$http.get("stock/api/user/getAll").then(result => {
									this.producterOptions = result.data.data
						})
					},

		//生产厂家
		producterFormatter(row) {
		      let v=row.producterId;
				for(let i=0;i<this.producterOptions.length;i++){
						if(this.producterOptions[i].producerId==v){
							return this.producterOptions[i].producerName;
						}
					}
					return "";
        },
		    
		// 打开选择药品的弹出层
		handleAddMedicines() {
		  this.open = true
		  this.title = '选择要添加的药品信息'
		  this.initrowid()
		},
		
		//查询弹出层药品的数据
		initMedicinesAll(){
			 this.$http.post("/stock/api/edit/gettccall/"+ this.pageNum+"/"+this.pageSize, this.queryParams).then(result => {
                           this.loading = true// 打开遮罩
			               this.medicinesTableList = result.data.data.records
			               this.total = result.data.data.total
			               this.loading = false// 关闭遮罩
			             })
			     },


    // 数据表格的多选择框选择时触发
    handleSelectionChnage(selection) {
      // console.log(selection)
      this.selectMedicines = selection
      this.selectMedicines.filter(m1 => {
        let flag = false
        // 判断purchaseItemList里面有没有已选择的ID
        this.purchaseItemList.filter(purch => {
          if (m1.medicinesId === purch.medicinesId) {
            flag = true
          }
        })
        // 如果没有，就加入purchaseItemList
        if (!flag) {
          // 放到purchaseItemList对象是selection深度clone
          this.purchaseItemList.push(JSON.parse(JSON.stringify(m1)))
        }
      })
      // 剔除里面不用的属性，添加需要的属性
      this.purchaseItemList.filter(m => {
        this.$delete(m, 'status')
        this.$delete(m, 'medicinesStockNum')
        this.$delete(m, 'medicinesStockDangerNum')
        this.$delete(m, 'createTime')
        this.$delete(m, 'updateTime')
        this.$delete(m, 'createBy')
        this.$delete(m, 'updateBy')

        this.$set(m, 'purchaseNumber', m.purchaseNumber ? m.purchaseNumber : 1)
        this.$set(m, 'tradePrice', m.tradePrice ? m.tradePrice : 0.00)
        this.$set(m, 'tradeTotalAmount', m.tradeTotalAmount ? m.tradeTotalAmount : 0.00)
        this.$set(m, 'batchNumber', m.batchNumber ? m.batchNumber : '')
        this.$set(m, 'remark', m.remark ? m.remark : '')
      })
    },


    // 保存并提交审核
    handleSubmitAndAudit() {
      const tx = this
      let queryid = this.$route.query.id;
      tx.$confirm('是否确认提交此单据的数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post(  `stock/api/edit/getPurchaseSh/${queryid}`).then(res => {
          if (res.data.data){
            tx.$message('提交审核成功')
            tx.handleQuery()// 全查询
          }
        }).catch(() => {
          tx.$message('提交审核失败')
        })
      }).catch(() => {
        tx.$message('提交已取消')
      })
    },

    // handzc(){
    //   const tx = this
    //   let queryid = this.$route.query.id;
    //   tx.$confirm('是否确认提交此单据的数据?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     this.$http.post(  `stock/api/edit/getPurchasezc/${queryid}`).then(res => {
    //       if (res.data.data){
    //         tx.$message('提交审核成功')
    //         tx.handleQuery()// 全查询
    //       }
    //     }).catch(() => {
    //       tx.$message('提交审核失败')
    //     })
    //   }).catch(() => {
    //     tx.$message('提交已取消')
    //   })
    // },


		handLeSizeChange(val) {
		  this.pageSize = val
		  // 重新查询
		  this.initrowid()
		},
		// 点击上一页  下一页，跳转到哪一页面时触发
		handleCurrentChange(val) {
		  this.pageNum = val
		  // 重新查询
		  this.initrowid()
		},
		
}
	}
</script>

<style scoped>
  .box-card{
    padding: 0px;
    margin: 0px;
    margin-bottom: 8px;
  }
</style>
